<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <title>法1 - CSS滚动锚定</title>
</head>
<body>
  <!-- 1. 右侧-导航栏 布局： -->
  <nav>
    <!-- 1.3 给[导航栏]每个 a标签 加上href, 然后页面相对应的地方 ->"指定相同的id" -->
    <a href="#t1">一、标题一</a>
    <a href="#t2">二、标题二</a>
    <a href="#t3">三、标题三</a>
    <a href="#t4">四、标题四</a>
    <a href="#t5">五、标题五</a>
    <a href="#t6">六、标题六</a>
  </nav>

  <!-- 1.2 左侧-主区域 布局： -->
  <h1>CSS 电梯导航</h1>
  <div class="content">
    <!-- 1.4 指定相同的id -->
    <h2 id="t1">一、标题一</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
  <div class="content">
    <!-- 1.4 指定相同的id -->
    <h2 id="t2">二、标题二</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
  <div class="content">
    <!-- 1.4 指定相同的id -->
    <h2 id="t3">三、标题三</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
  <div class="content">
    <!-- 1.4 指定相同的id -->
    <h2 id="t4">四、标题四</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
  <div class="content">
    <!-- 1.4 指定相同的id -->
    <h2 id="t5">五、标题五</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
  <div class="content">
    <!-- 1.4 指定相同的id -->
    <h2 id="t6">六、标题六</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
  
</body>
</html>